<template>
	<view id="orderDetailPage">
		<view class="order-header">
			<view class="status-name" v-if="type==2" key="yet">
				<image class="wallet-img" src="../../static/img/order-wallat.png" mode="aspectFill"></image>
				<text class="status-txt">待付款</text>
			</view>
			<view class="status-name" v-if="type==3" key="send">
				<image class="send-img" src="../../static/img/package.png" mode="aspectFill"></image>
				<text class="status-txt">待发货</text>
			</view>
			<view class="status-name" v-if="type==4" key="get">
				<image class="get-img" src="../../static/img/box.png" mode="aspectFill"></image>
				<text class="status-txt">待收货</text>
			</view>
			<view class="status-name" v-if="type==5" key="done">
				<image class="done-img" src="../../static/img/list.png" mode="aspectFill"></image>
				<text class="status-txt">已完成</text>
			</view>
			<view class="status-tip">
				请在14:59完成支付
			</view>
		</view>
		<view class="address-wrapper" @click="toAdrEdit">
			<view class="address-title">
				<view class="user-name">
					唐先生
				</view>
				<view class="user-tel">
					123****8910
				</view>
			</view>
			<view class="address">
				广东省深圳市南山区京开路与通海路交叉口
			</view>
		</view>
		<image src="../../static/img/line.png" class="line" mode="aspectFill"></image>
		<view class="order-wrap border-top">
			<view class="order-tit">
				商品清单
			</view>
			<view class="order-wrapper">
				<view class="goods">
					<image class="good-pic" src="../../static/img/goods.png" mode="aspectFill"></image>
				</view>
				<view class="order-con">
					<view class="order-good">
						A580进口高速防滑传动带
					</view>
					<view class="order-nu">
						x100
					</view>
					<view class="price">
						<text class="unit">￥</text>
						399.98
					</view>
				</view>
			</view>
		</view>
		<view class="labels border-top">
			<view class="order-tit">
				费用明细
			</view>
			<view class="label-row">
				<view class="key">
					产品价格
				</view>
				<view class="val">
					￥89.00
				</view>
			</view>
			<view class="label-row">
				<view class="key">
					运费
				</view>
				<view class="val">
					￥89.00
				</view>
			</view>
			<view class="label-row">
				<view class="key">
					税费(17%)
				</view>
				<view class="val">
					￥89.00
				</view>
			</view>
			<view class="label-footer">
				需付款：<text class="price">￥299.00</text>
			</view>
		</view>
		<view class="labels order-labels border-top">
			<view class="order-tit">
				订单信息
			</view>
			<view class="order-row">
				<view class="order-k">
					订单编号:
				</view>
				<view class="order-v">
					201557941231545132165
				</view>
			</view>
			<view class="order-row">
				<view class="order-k">
					创建时间:
				</view>
				<view class="order-v">
					2019-10-08 12:00:00
				</view>
			</view>
		</view>
		<modal title="提示" :hidden="modalHidden" confirm-text="确定" cancel-text="取消" @confirm="modalBindaconfirm" @cancel="modalBindcancel">
			确定取消订单？
		</modal>

		
		<order-footer v-if="type==2" @cancel="cancel" @toPay="doPay"></order-footer>
		<pay v-if="showPay" @close="payClose" :price="399.98" name="A580进口高速防滑传动带"></pay>
	</view>
</template>

<script>
	// import type1 from '../../static/img/order-wallat.png'
	// import type2 from '../../static/img/package.png'
	// import type3 from '../../static/img/box.png'
	// import type4 from '../../static/img/list.png'
	
	import orderFooter from '../../components/order-footer/order-footer.vue'
	import pay from '../../components/pay/pay.vue'
	import {tabs} from '../../utils/data.js'
	export default {
		components: {
			orderFooter,
			pay,
			// type1,
			// type2,
			// type3,
			// type4
		},
		data() {
			return {
				type: 0,
				tabs,
				showPay: false,
				modalHidden: true
			}
		},
		methods: {
			cancel() {
				this.modalHidden = false
			},
			doPay() {
				this.showPay = true
			},
			payClose() {
				this.showPay = false
			},
			modalBindaconfirm() {
				uni.navigateBack({
					delta: -1
				})
			},
			modalBindcancel() {
				this.modalHidden = true
			}
		},
		onLoad(options) {
			this.type = options.type
			console.log(this.type)
		}
	}
</script>

<style>
#orderDetailPage {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.order-header {
	box-sizing: border-box;
	height:141upx;
	padding: 34upx 0 0 24upx;
	background:rgba(234,10,42,1);
}
.status-name {
	display: flex;
	align-items: center;
}
.wallet-img {
	width: 41upx;
	height: 37upx;
}
.send-img {
	width: 41upx;
	height: 36upx;
}
.get-img {
	width: 44upx;
	height: 35upx;
}
.done-img {
	width: 38upx;
	height: 40upx;
}
.status-txt {
	font-size:30upx;
	color: #FFFFFF;
	margin-left: 18upx;
}
.status-tip {
	font-size: 24upx;
	margin-top: 26upx;
}
.address-wrapper {
	height: 135upx;
	padding: 25upx 26upx 0 24upx;
	position: relative;
}
.address-title {
	height: 28upx;
	display: flex;
	font-size:28upx;
	font-weight:500;
	color:rgba(51,51,51,1);
	margin-right: 31upx;
}
.address {
	font-size:24upx;
	font-weight:400;
	color:rgba(122,122,122,1);
	margin: 28upx 0 0 0;
}
.line {
	display: block;
	height: 4upx;
	width: 100%;
}
.border-top {
	border-top: 20upx solid rgb(246,246,246);
	padding-left: 24upx;
}

.order-wrap {
	padding: 25upx 0 0 27upx;
}
.order-tit {
	font-size:30upx;
	font-weight:bold;
	color:rgba(51,51,51,1);
	margin:0 0 0 40upx ;
}
.order-wrapper {
	display: flex;	
}
.goods {
	width: 120upx;
	height: 120upx;
	flex: 1 120upx 0;
}
.good-pic {
	width: 100%;
	height: 100%;
}
.order-con {
	margin-left: 36upx;
	flex: 4;
}
.order-nu {
	color: #666666;
	font-size: 24upx;
}
.order-good {
	color: #333333;
	font-size: 30upx;
}
.labels .order-tit {
	margin: 40upx 0 0 0;
}
.label-row {
	height: 80upx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size:28upx;
	font-weight:500;
	padding-right: 26upx;
}
.key {
	color:rgba(102,102,102,1);
}
.label-footer {
	font-size: 26upx;
	height: 84upx;
	text-align: right;
	line-height: 84upx;
	width: 690upx;
	margin: 0 auto;
	border-top:1upx solid #F6F6F6;
}
.order-row {
	display: flex;
	margin: 30upx 0 0 0;
	font-size: 24upx;
	color: #666666;
}
.order-k {
	margin-right: 32upx;
}
.order-labels {
	min-height: 320upx;
}

</style>
